<template>
    <div class="search-page-container" :style="mainStyle">
        <!--<navigation-bar :title="'搜索'" :onLeftButtonClick="function(){toBack()}"-->
        <!--:rightIcon="' '"></navigation-bar>-->
        <div>
            <wxc-searchbar ref="wxc-searchbar"
                           @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
                           @wxcSearchbarInputReturned="wxcSearchbarInputReturned"
                           @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"
                           @wxcSearchbarCloseClicked="wxcSearchbarCloseClicked"
                           @wxcSearchbarInputOnFocus="wxcSearchbarInputOnFocus"
                           @wxcSearchbarInputOnBlur="wxcSearchbarInputOnBlur"></wxc-searchbar>
        </div>
        <div class="control-container">
        <top-tab-bar ref="top-tab-bar"
                     :tab-titles="tabTitles"
                     :tab-styles="tabStyles"
                     title-type="icon"
                     :tab-page-height="100"
                     @wxcTabBarCurrentTabSelected="wxcTabPageCurrentTabSelected">
        </top-tab-bar>
        </div>
        <div style="flex:1;width:750px;">
            <r-l-list ref="dylist" :listItemName="itemClass" :listData="list" :bottomEmpty="listBottomEmpty"
                      :listHeight="listHeight"
                      :forLoadMore="onLoadMore" :forRefresh="onRefresh" :itemClick="itemClick"></r-l-list>
        </div>
    </div>
</template>

<script>


  import RLList from './widget/RLList.vue'
  import NavigationBar from './widget/NavigationBar.vue'
  import TopTabBar from './widget/TopTabBar.vue'
  import Config from '../config/HomeTabConfig'
  import event from '../core/net/event'
  import search from '../core/net/search'
  import { WxcSearchbar, Utils } from 'weex-ui'
  import { getEntryPageStyle, getListBottomEmpty, getListHeight, navigatorbBarHeight } from '../config/Config'

  export default {
    props: {},
    components: {RLList, WxcSearchbar, NavigationBar, TopTabBar},
    data () {
      return {
        filter: null,
        currentPage: 1,
        listType: 'content',
        searchData: '',
        tabTitles: [
          {
            title: '文章',
          },
          {
            title: '产品',
          },
        ],
        tabStyles: Config.tabStyles,
        itemClass: 'RepositoryItem',
        list: [],
        result: [],
        selectTypeData: null,
        selectSortData: null,
        selectLanguageData: null,
        listBottomEmpty: getListBottomEmpty(),
        mainStyle: {},
        listHeight: getListHeight(Utils.env.getScreenHeight() - navigatorbBarHeight - 150, Utils),
      }
    },
    created: function () {
      this.init()
      this.mainStyle = getEntryPageStyle(Utils)
    },
    activated: function () {
      //keep alive
      if (WXEnvironment.platform === 'Web') {
        this.init()
      }
    },
    methods: {
      init () {},
      searchRepos () {
        if (!this.searchData || this.searchData.length < 1) {
          return
        }
        search.searchList(this.searchData)
          .then((res) => {
            this.result = res.data
            this.resolveResult()
          })
      },
      resolveResult () {
        this.$refs.dylist.setNotNeedLoadMore()
        this.$refs.dylist.stopLoadMore()
        this.list = this.result[this.listType]
      },
      loadData () {
        this.searchRepos()
      },
      onLoadMore () {
        this.loadData()
      },
      wxcTabPageCurrentTabSelected (e) {
        if (e.page == 0) {
          this.onControlClick('content')
        } else if(e.page == 1) {
          this.onControlClick('product')
        }
      },
      onRefresh () {
        this.result = []
        this.list = []
        this.loadData()
      },
      itemClick (index) {
        let data = this.list[index]
        if (this.listType === 'product') {
          this.jumpWithParams('ProductDetailPage', {
            product: data.id,
          })
        } else if (this.listType === 'content') {
          this.jumpWithParams('WebPage', {
            url: `http://user.test.yarsenal.com/app/content/${data.id}`,
          })
        } else if (this.listType === 'course') {
          this.jumpWithParams('CourseDetail', {
            course: data.id,
            title: `${data.name}详情`,
          })
        } else if (this.listType === 'evaluation') {
          this.jumpWithParams('TestDetail', {
            test: data.ex.id,
            desc: data.ex.desc,
            image: data.ex.image,
            is: data.ex.is,
            title: data.name,
          })
        }
      },
      wxcSearchbarInputOnFocus () {
      },
      wxcSearchbarInputOnBlur () {
        this.onRefresh()
      },
      wxcSearchbarCloseClicked () {
        this.$refs['wxc-searchbar'].setValue('')
      },
      wxcSearchbarInputOnInput (e) {
        this.searchData = e.value
      },
      wxcSearchbarCancelClicked (e) {
        //this.$refs['wxc-searchbar'].setValue('');
      },
      wxcSearchbarInputDisabledClicked (e) {
      },
      wxcSearchbarDepChooseClicked (e) {
        console.log('wxcSearchbarDepChooseClicked', e)
      },
      wxcSearchbarInputReturned (e) {
        console.log('wxcSearchbarDepChooseClicked', e)
      },
      onControlClick (index) {
        this.listType = index
        if (index === 'content') {
          this.itemClass = 'RepositoryItem'
        } else if (index === 'product') {
          this.itemClass = 'EventItem'
        } else if (index === 'course') {
          this.itemClass = 'CourseItem'
        } else if (index === 'evaluation') {
          this.itemClass = 'TestItem'
        }
        this.resolveResult()
      },
    },
  }
</script>

<style lang="scss">
    @import '../config/styles.scss';

    .control-container {
        width: 750px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-shadow: $--box-shadow-color;
    }

    .search-page-container {
        align-items: center;
        justify-content: center;
        background-color: $--container-color;
    }
</style>
<style scoped>
    .control-text {
        flex: 1;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        font-size: 26px;
        display: -webkit-box;
        white-space: normal !important;
        -webkit-box-orient: vertical;
    }
</style>
